<template>
  <div class="es-block">
    <Title>降雨等级：24小时内各等级降雨量</Title>
    <div style="width: 100%; height: 90%; padding-top: 20px">
      <!-- <Chart :option="option" /> -->
      <el-table
        :cell-style="cellStyle"
        :header-cell-style="cellStyle"
        :data="tableData"
        style="width: 100%"
        class="typeTable"
      >
        <el-table-column prop="type" label="降雨等级" />
        <el-table-column prop="c" label="6小时降雨量(mm)" />
        <el-table-column prop="b" label="12小时降雨量(mm)" />
        <el-table-column prop="a" label="24小时降雨量(mm)" />
      </el-table>
    </div>
  </div>
</template>

<script setup lang="ts">
import Title from '../Title.vue'
const cellStyle = () => {
  return {
    background: '#222733',
    color: '#eee',
  }
}
const tableData = [
  {
    type: '小雨',
    a: '0.1-9.9',
    b: '0.1-4.9',
    c: '0.1-3.9',
  },
  {
    type: '中雨',
    a: '10.0-24.9',
    b: '5.0-14.9',
    c: '4.0-11.0',
  },
  {
    type: '大雨',
    a: '25.0-49.9',
    b: '15.0-29.9',
    c: '12.0-24.9',
  },
  {
    type: '暴雨',
    a: '50.0-99.9',
    b: '30.0-69.9',
    c: '25.0-54.9',
  },
  {
    type: '大暴雨',
    a: '100.0-249.9',
    b: '70.0-139.9',
    c: '55.0-89.9',
  },
  {
    type: '特大暴雨',
    a: '≥2500',
    b: '≥140.0',
    c: '≥90.0',
  },
]
</script>

<style lang="scss" scoped>
.es-block {
  width: 100%;
  height: 100%;
}

:deep(.el-table .el-table__cell) {
  padding: 2px 0;
}
</style>
